<template>
  <div>
    <page-main>
      <el-calendar ref="calendar">
        <template #header="{ date }">
          <span>{{ date }}</span>
          <el-button-group>
            <el-button size="mini" @click="selectDate('prev-month')">上个月</el-button>
            <el-button size="mini" @click="selectDate('today')">本月</el-button>
            <el-button size="mini" @click="selectDate('next-month')">下个月</el-button>
          </el-button-group>
        </template>
        <template #dateCell="{ data }">
          <div class="dateShow">
            <div>{{ data.day }}</div>
            <template v-for="(item, index) in calendarData" :key="item.date + index">
              <div v-if="data.day == item.date" class="dateInfoItem">
                <div class="dateInfoShowItem red">
                  设备报警数：（{{ item.method_bj }}）已处理：（{{ item.exec_bj }}）
                </div>
                <div class="dateInfoShowItem yellow">
                  设备故障数：（{{ item.method_gz }}）已处理：（{{ item.exec_gz }}）
                </div>
                <div class="dateInfoShowItem blue">
                  设备预警数：（{{ item.method_yj }}）已处理：（{{ item.exec_yj }}）
                </div>
              </div>
            </template>
          </div>
        </template>
      </el-calendar>

    </page-main>
    
  </div>
</template>

<script>
export default {
  data() {
    return {
      calendarData: [],
      yearMonth: ''
    };
  },
  created() {
    let date = new Date()
    this.yearMonth = [date.getFullYear(), Number(date.getMonth()) + 1]
    this.getCalendarData()
  },
  methods: {
    selectDate(value) {
      this.$refs.calendar.selectDate(value);
      let temp = this.$refs.calendar.curMonthDatePrefix.split('-')
      this.yearMonth = temp
      this.getCalendarData()
    },
    getCalendarData() {
      this.$api.post('/unit/DeviceWarning/total', {
        total_type: ['method_field', 'date_count'],
        year: this.yearMonth[0],
        month: this.yearMonth[1],
        rows: 100
      }).then(res => {
        this.calendarData = res.data.list
      })
    }
  },
};
</script>

<style>
.dateShow {
    font-size: 12px;
}
.dateInfoShowItem {
    margin-top: 4px;
    color: #fff;
}
.red {
    background-color: #f56c6c;
}
.yellow {
    background-color: #e6a23c;
}
.blue {
    background-color: #409eff;
}
.el-calendar-table .el-calendar-day {
    height: 10vh;
}
</style>
